<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据展示</title>

		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
		<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
		<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<%--		引入Echartsjs文件--%>
		<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
			<script src="${pageContext.request.contextPath}/js/china.js"></script>
		</head>
	
	<body class="layui-layout-login">
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<%--每周注册的人数表--%>
		<div id="dayCount" style="width: 600px;height:400px;"></div>
		<%--中国地图--%>
		<div id="myChina" style="width: 600px;height:400px;"></div>
	</body>

	<script>
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var myCount = echarts.init(document.getElementById('dayCount'));
		var myChina = echarts.init(document.getElementById('myChina'));
		$.ajax({
			url:'${pageContext.request.contextPath}/user/selectAllNo',
			success:function (data) {
				console.log(data);

				// 指定图表的配置项和数据
				var option1 = {
					//图表的标题
					title: {
						text: '持明法洲男女人数对比'
					},
					// 工具栏
					tooltip: {},
					// legend 传奇 在数学中指的是 系列
					// 在代码中 代表数据的类型
					legend: {
						data:['人数']
					},
					// xAxis x轴坐标
					xAxis: {
						data: ["男","女"]
					},
					// y 轴坐标 自动生成
					yAxis: {},
					// 给x轴赋值
					series: [{
						// name 必须和 legend 中的配置一样
						name: '人数',
						// 定义是展示类型 bar柱状图 line折线图 pie 饼状图
						type: 'line',
						// x轴坐标对应的坐标值
						data: data.sex
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option1);


				var option2 = {
					//图表的标题
					title: {
						text: '持明法洲前三周注册人数'
					},
					// 工具栏
					tooltip: {},
					// legend 传奇 在数学中指的是 系列
					// 在代码中 代表数据的类型
					legend: {
						data:['人数']
					},
					// xAxis x轴坐标
					xAxis: {
						data: ["第一周","第二周","第三周"]
					},
					// y 轴坐标 自动生成
					yAxis: {},
					// 给x轴赋值
					series: [{
						// name 必须和 legend 中的配置一样
						name: '人数',
						// 定义是展示类型 bar柱状图 line折线图 pie 饼状图
						type: 'bar',
						// x轴坐标对应的坐标值
						data: [data.count.第一周,data.count.第二周,data.count.第三周]
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myCount.setOption(option2);


				var option3 = {
					title : {
						text: '用户地区分布',
						left: 'center'
					},
					tooltip : {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data:['用户人数']
					},
					visualMap: {
						min: 0,
						max: 25000,
						left: 'left',
						top: 'bottom',
						text:['高','低'],           // 文本，默认为数值文本
						calculable : true
					},
					toolbox: {
						show: true,
						orient : 'vertical',
						left: 'right',
						top: 'center',
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					series : [
						{
							name: '用户人数',
							type: 'map',
							mapType: 'china',
							roam: false,
							label: {
								normal: {
									show: false
								},
								emphasis: {
									show: true
								}
							},
							data:data.province
						}
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChina.setOption(option3);
			}
		})
		/*$.ajax({
			url:'${pageContext.request.contextPath}/user/selectCountByDay',
			success:function (data) {
				console.log(data);
				// 指定图表的配置项和数据
				var option2 = {
					//图表的标题
					title: {
						text: '持明法洲前三周注册人数'
					},
					// 工具栏
					tooltip: {},
					// legend 传奇 在数学中指的是 系列
					// 在代码中 代表数据的类型
					legend: {
						data:['人数']
					},
					// xAxis x轴坐标
					xAxis: {
						data: ["第一周","第二周","第三周"]
					},
					// y 轴坐标 自动生成
					yAxis: {},
					// 给x轴赋值
					series: [{
						// name 必须和 legend 中的配置一样
						name: '人数',
						// 定义是展示类型 bar柱状图 line折线图 pie 饼状图
						type: 'bar',
						// x轴坐标对应的坐标值
						data: [data.第一周,data.第二周,data.第三周]
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myCount.setOption(option2);
			}
		})
		$.ajax({
			url:'${pageContext.request.contextPath}/user/selectCountByProvince',
			success:function (data) {
				console.log(data);
				//    配置地区分布图表数据
				var option3 = {
					title : {
						text: '用户地区分布',
						left: 'center'
					},
					tooltip : {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data:['用户人数']
					},
					visualMap: {
						min: 0,
						max: 25000,
						left: 'left',
						top: 'bottom',
						text:['高','低'],           // 文本，默认为数值文本
						calculable : true
					},
					toolbox: {
						show: true,
						orient : 'vertical',
						left: 'right',
						top: 'center',
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					series : [
						{
							name: '用户人数',
							type: 'map',
							mapType: 'china',
							roam: false,
							label: {
								normal: {
									show: false
								},
								emphasis: {
									show: true
								}
							},
							data:data
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChina.setOption(option3);
			}
		})*/
	</script>
</html>
